<template>
  <div class="good-list">
    <div class="header">
      <div v-for="item in column"
           :key="item.title"
           :style="{width: item.width}">
        {{ item.title }}
      </div>
    </div>
    <div class="body">
      <good-list-item v-for="cartItem in esList"
                      :key="cartItem.skuId"
                      :columnWidth="columnWidth"
                      :data="cartItem"/>
    </div>
  </div>
</template>

<script lang="ts"
        setup>
import {useCartStore} from '@/stores/cart'
import type {Column} from '@/types/table'
import GoodListItem from '@/views/cart/pay/components/GoodListItem.vue'
import {storeToRefs} from 'pinia'

let CartStore = useCartStore()
let {esList} = storeToRefs(CartStore)

let column: Column[] = [
  {title: '商品信息', width: '520px'},
  {title: '单价', width: '170px'},
  {title: '数量', width: '170px'},
  {title: '小计', width: '170px'},
  {title: '实付', width: '170px'}
]
let columnWidth = column.map(i => i.width)
</script>

<style lang="less"
       scoped>
.good-list {
  border-left: 1px solid #f5f5f5;
  border-right: 1px solid #f5f5f5;

  .header {
    background-color: #f5f5f5;
    height: 60px;
    display: flex;
    align-items: center;

    > div {
      text-align: center;
    }
  }
}
</style>